<!DOCTYPE config>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <title>ff4j</title>
  <link href="{SERVLET_CONTEXT}?rsc=css" rel="stylesheet">
  <script type="text/javascript" charset="utf-8" src="{SERVLET_CONTEXT}?rsc=js"></script>
</head>

<body style="background-color:white">
 
 <div class="navbar">
  <div class="navbar-inner">
   <div class="container">
     <span class="brand">
      <img alt="" src="" style="height:30px;width:70px" />
      Administration Console { <span style="color:#00ab8b" >embedded</span> }</span>
     <div class="brand" style="float:right;font-size:1.2em">
        <span style="color:red"> New console servlet !!!</span> Please upgrade using
        <a href="https://github.com/clun/ff4j/wiki/Web-Concepts">
          https://github.com/clun/ff4j/wiki/Web-Concepts 
        </a> 
     </div>
   </div>
  </div>
 </div>

<div class="subnavbar">
  <div class="subnavbar-inner">
    <div class="container" style="position:absolute;left:0">
      <ul class="mainnav">
        <li>
           <a data-toggle="modal" href="#modalImport" class="open-ImportDialog" >
            <i class="icon-file" style="margin-left:10px"></i>
            <span><u><b>I</b></u>mport XML</span>
          </a>
        </li>
        <li>
          <a href="{SERVLET_CONTEXT}?op=export">
            <i class="shortcut-icon icon-download-alt"></i>
           <span><u><b>E</b></u>xport XML</span>
          </a>
        </li>
        <li style="background-color:white"/>
      </ul>
    </div>
  </div>
</div>

  
<div class="container" style="width:95%">
 <div id="message" >{ALERT}</div>
 
 <h4 style="color:#00ab8b"><i class="icon-home"></i>&nbsp;Features
  <div style="float:right;margin-bottom:10px">
   <button type="button" class="btn btn-green" data-toggle="modal" href="#modalCreate">
	<i class="icon-plus icon-white" style="margin-left:10px"></i><br>
     <span>New <u><b>F</b></u>eature</span>
   </button>
   <button type="button" class="btn btn-green" data-toggle="modal" href="#modalToggle" > 
    <i class="icon-th-list icon-white"></i><br>			
      <span><u><b>T</b></u>oggle Group</span>
   </button>
  </div>
 </h4>
	
 <div class="widget widget-table action-table">
  <div class="widget-content">
    <table class="table table-striped table-bordered">
     <thead>
      <tr>
       <th style="width:15%;text-align:center">Feature</th>
       <th style="width:15%;text-align:center">Group</th>
       <th style="width:20%;text-align:center">Permissions</th>
       <th style="width:32%;text-align:center">Strategy</th>
       <th style="width:8%;text-align:center">Toggle</th>
       <th style="width:5%;text-align:center">E</th>
       <th style="width:5%;text-align:center">D</th>
      </tr>
    </thead>
    <tbody>{FEATURE_ROWS}</tbody>
   </table>
  </div>
 </div>
 
 <p/><br/>
 
 <h4 style="color:#19599A"><i class="icon-list-alt"></i>&nbsp;Properties :
 <div style="float:right;margin-bottom:10px">
  <button type="button" class="btn btn-primary" data-toggle="modal" href="#modalCreateProperty">
   <i class="icon-plus icon-white" style="margin-left:10px"></i><br>
   <span>New <u><b>P</b></u>roperty</span>
  </button>
 </div>
</h4>

<div class="widget widget-table action-table">
  <div class="widget-content">
    <table class="table table-striped table-bordered">
     <thead>
      <tr">
       <th style="width:20%;text-align:center;font-weight:normal"><b>Property</th>
       <th style="width:15%;text-align:center;font-weight:normal"><b>Value</th>
       <th style="width:30%;text-align:center;font-weight:normal"><b>Type</th>
       <th style="width:25%;text-align:center;font-weight:normal"><b>FixedValue</th>
	   <th style="width:5%;text-align:center;font-weight:normal"><b>E</th>
       <th style="width:5%;text-align:center;font-weight:normal"><b>D</th>	   
      </tr>
    </thead>
    <tbody>
    {PROPERTIES_ROWS}
    </tbody>
    </table>
  </div>
 </div>
</div>

<!-- Creation FORM -->
<form class="form-horizontal" action="{SERVLET_CONTEXT}" method="POST" >

 <div class="modal hide fade" id="modalCreate" tabindex="-1" role="dialog" aria-labelledby="labelCreate" aria-hidden="true">
  
  <!-- Header -->
  <div class="modal-header">   
    <button class="close" data-dismiss="modal"><span  style="color:#ffffff">x</span></button>   
    <h4 id="labelCreate"><i class="icon-plus icon-white" ></i>&nbsp;Create new Feature</h4>
  </div>

  <!-- Body -->
  <div class="modal-body" style="height:500px">
    
    <!-- Name --> 
    <div class="control-group"> 
      <label class="control-label" for="uid" style="color:#00ab8b;font-style:normal;font-weight:normal">Feature Name</label>
      <div class="controls">   
        <input type="text" name="uid" id="uid" style="width:250px;height:30px;" required/>  
      </div> 
    </div> 

    <!-- Description --> 
    <div class="control-group">  
      <label class="control-label" for="desc" style="color:#00ab8b;font-style:normal">Description</label>  
      <div class="controls">
        <textarea class="field span4" id="textarea" name="desc" id="desc" rows="3"></textarea>
      </div>
    </div>

    <!-- Group --> 
    <div class="control-group">  
      <label class="control-label" for="group" style="color:#00ab8b;font-style:normal">Group</label>  
        <div class="controls">
          <div class="btn-group">
            <input type="text" name="groupName" id="groupName" style="width:250px;height:30px;" />
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-inbox icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:250px;font-style:normal;color:#696969">
              {FEATURE_GRPS_CREATE}
              <li class="divider"></li>
              <li><a href="#" onclick="javascript:$('#groupName').val('');">None</a></li>
            </ul>
          </div> <!-- btn-group -->     
        </div> <!-- controls -->
      </div> <!-- control-group -->

    <!-- Strategy --> 
    <div class="control-group">  
      <label class="control-label" for="strategy" style="color:#00ab8b;font-style:normal">Strategy</label>  
      <div class="controls">
        <div class="btn-group">
            <input type="text" name="strategy" id="strategy" style="width:250px;height:30px;font-style:normal" >
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-cog icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:250px;">
               <li><a href="#" onclick="javascript:
                	$('#modalCreate #strategy').val('org.ff4j.strategy.el.ExpressionFlipStrategy');
                	$('#modalCreate #stratlist').show();
                	$('#modalCreate #initParams').val('expression=dummy OR foo')">Expression</a></li>
              <li><a href="#" onclick="javascript:
              		$('#modalCreate #strategy').val('org.ff4j.strategy.PonderationStrategy');
              		$('#modalCreate #stratlist').show();
              		$('#modalCreate #initParams').val('weight=0.5')">Ponderation</a></li>
               <li><a href="#" onclick="javascript:
               		$('#modalCreate #strategy').val('org.ff4j.strategy.time.ReleaseDateFlipStrategy');
               		$('#modalCreate #stratlist').show();
               		$('#modalCreate #initParams').val('releaseDate=2013-07-14-14:00')">ReleaseDate</a></li>
              <li><a href="#" onclick="javascript:
              		$('#modalCreate #strategy').val('org.ff4j.strategy.ClientFilterStrategy');
              		$('#modalCreate #stratlist').show();
              		$('#modalCreate #initParams').val('grantedClients=c1,c2,c3')">ClientFilter</a></li>
              <li><a href="#" onclick="javascript:
              		$('#modalCreate #strategy').val('org.ff4j.strategy.BlackListStrategy');
              		$('#modalCreate #stratlist').show();
              		$('#modalCreate #initParams').val('grantedClients=c1,c2,c3')">BlackList</a></li>
               <li><a href="#" onclick="javascript:
              		$('#modalCreate #strategy').val('org.ff4j.strategy.DarkLaunchStrategy');
              		$('#modalCreate #stratlist').show();
              		$('#modalCreate #initParams').val('weight=0.2')">Darklaunch</a></li>
              <li><a href="#" onclick="javascript:
              		$('#modalCreate #strategy').val('org.ff4j.strategy.ServerFilterStrategy');
              		$('#modalCreate #stratlist').show();
              		$('#modalCreate #initParams').val('grantedServers=s1,s2,s3')">ServerFilter</a></li>
              <li class="divider"></li>
              <li><a href="#" onclick="javascript:
              		$('#modalCreate #strategy').val('');
              		$('#modalCreate #stratlist').hide();
              		$('#modalCreate #startparam').val('')">None</a></li>
            </ul>
          </div>
        </div>
         <div id="stratlist" class="controls hide" style-"font-style:normal">
        <p/><br/><span style="color:#00ab8b"><i class="icon-star"></i>&nbsp;Please Give init param :
          <br><input type="text" name="initParams" id="initParams" style="width:250px;height:30px;font-style:normal">
      </div>
      </div>

    <!-- Permissions --> 
    <div class="control-group">  
      <label class="control-label" for="permission" style="color:#00ab8b;font-style:normal">Permissions</label>  
      <div class="controls">
        <div class="btn-group">
            <input type="text" name="permission" id="permission" style="width:250px;height:30px;font-style:normal" value="Public" readonly="readonly">
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-user icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:250px;font-style:normal">
                <li><a href="#" onclick="javascript:$('#permission').val('Public');$('#permlist').hide();"><i class="icon-flag" ></i>&nbsp;Public</a></li>
                <li><a href="#" onclick="javascript:$('#permission').val('Restricted');$('#permlist').show();"><i class="icon-lock" ></i>&nbsp;Restricted</a></li>
            </ul>
        </div>
      </div>
      <div id="permlist" class="controls hide" style-"font-style:normal">
        <p/><br/><span style="color:#00ab8b"><i class="icon-list"></i>&nbsp;Please select your permissions :</span>
        {PERMISSIONS}
      </div>
    </div><!-- Control group -->

    </div> <!-- modeal body -->

  <div class="modal-footer" >
    <button class="btn btn" data-dismiss="modal"><i class="icon-remove" ></i>&nbsp;Cancel</button>
    <button class="btn btn-green" type="submit"><i class="icon-ok icon-white" ></i>&nbsp;Create</button>
  </div>

   <script type="text/javascript" >
    $(document).on("click", ".open-AddFlipDialog", function () { $(".modal-body #uid").focus();});
   </script>

   <input type="hidden" name="op" value="create"  />
 </div>
</form>

<!-- ******************* -->
<!-- ** TOGGLE GROUP  ** -->
<!-- ******************* -->


<form action="{SERVLET_CONTEXT}" method="POST" name="toggleGroupForm" id="toggleGroupForm">

  <div class="modal hide fade" id="modalToggle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    
    <div class="modal-header">   
      <button class="close" data-dismiss="modal">x</button>   
      <h4 id="myModalLabel"><i class="icon-th-list icon-white"></i>&nbsp;Toggle a group of features</h3>
    </div>

    <div class="modal-body" style="height:250px">

    <!-- Group --> 
    <div class="control-group">  
     <label class="control-label" for="groupName" style="color:#00ab8b;font-style:normal">GroupName</label>
        <div class="controls">
          <div class="btn-group">
            <input type="text" name="groupName" id="groupName" style="width:250px;height:30px;" readonly="readonly" />
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-inbox icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:250px;font-style:normal;color:#696969">
             	{FEATURE_GRPS_TOGGLE}
              <li class="divider"></li>
              <li><a href="#" onclick="javascript:$('#modalToggle #groupName').val('');">None</a></li>
            </ul>
          </div> <!-- btn-group -->     
        </div> <!-- controls -->
      </div> <!-- control-group -->
      
       <div class="control-group">  
      <label class="control-label" for="ope" style="color:#00ab8b;font-style:normal">Operation</label>  
      <div class="controls">
        <div class="btn-group">
            <input type="text" name="ope" id="ope" style="width:250px;height:30px;font-style:normal" readonly="readonly">
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-cog icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:250px;">
                <li><a href="#" onclick="javascript:$('#modalToggle #ope').val('enable');">enable</a></li>
                <li><a href="#" onclick="javascript:$('#modalToggle #ope').val('disable');">disable</a></li>
            </ul>
          </div>
        </div>
        </div>
    </div>
    
    <div class="modal-footer">
      <button class="btn btn" data-dismiss="modal"><i class="icon-remove" ></i>&nbsp;Cancel</button>
      <button class="btn btn-green" type="submit" ><i class="icon-check icon-white" ></i>&nbsp;Validate</button>
    </div>
    
    
   <input type="hidden" name="op" value="toggleGroup"  />

  </div>
</form>

<!-- ******************* -->
<!-- ** IMPORT MODAL  ** -->
<!-- ******************* -->

<form action="{SERVLET_CONTEXT}" method="POST" enctype="multipart/form-data" >

  <div class="modal hide fade" id="modalImport" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    
    <div class="modal-header">   
      <button class="close" data-dismiss="modal">x</button>   
      <h4 id="myModalLabel"><i class="icon-file icon-white"></i>&nbsp;Import Features</h3>
    </div>

    <div class="modal-body">
      <p/>Choose an <b>XML</b> FF4J configuration file to be imported in the current repository</p>
      <input type="hidden" name="op"        value="import"  />
      <input type="file"   name="flipFile"  class="btn btn-green"/>
    </div>
    
    <div class="modal-footer">
      <button class="btn btn" data-dismiss="modal"><i class="icon-remove" ></i>&nbsp;Cancel</button>
      <button class="btn btn-green" type="submit"><i class="icon-file icon-white" ></i>&nbsp;Import </button>
    </div>

  </div>
</form>

<!-- ******************* -->
<!-- ** EDIT FORM ** -->
<!-- ******************* -->
<form class="form-horizontal" action="{SERVLET_CONTEXT}" method="POST" >
  <div class="modal hide fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    
    <div class="modal-header">
      <button class="close" data-dismiss="modal">x</button>
      <h4 id="myModalLabel"><i class="icon-pencil"></i>&nbsp;Edit Feature</h4>
    </div>
    
  <!-- Body -->
  <div class="modal-body" style="height:500px">
    
    <!-- Name --> 
    <div class="control-group"> 
      <label class="control-label" for="uid" style="color:#00ab8b;font-style:normal;font-weight:normal">Feature Name</label>
      <div class="controls">   
        <input type="text" name="uid" id="uid" style="width:250px;height:30px;" required/>  
      </div> 
    </div> 

    <!-- Description --> 
    <div class="control-group">  
      <label class="control-label" for="desc" style="color:#00ab8b;font-style:normal">Description</label>  
      <div class="controls">
        <textarea class="field span4" name="desc" id="desc" rows="3"></textarea>
      </div>
    </div>

    <!-- Group --> 
    <div class="control-group">  
      <label class="control-label" for="group" style="color:#00ab8b;font-style:normal">Group</label>  
        <div class="controls">
          <div class="btn-group">
            <input type="text" name="groupName" id="groupName" style="width:250px;height:30px;" />
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-inbox icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:250px;font-style:normal;color:#696969">
              {FEATURE_GRPS_EDIT}
              <li class="divider"></li>
              <li><a href="#" onclick="javascript:$('#groupName').val('');">None</a></li>
            </ul>
          </div> <!-- btn-group -->     
        </div> <!-- controls -->
      </div> <!-- control-group -->

    <!-- Strategy --> 
    <div class="control-group">  
      <label class="control-label" for="strategy" style="color:#00ab8b;font-style:normal">Strategy</label>  
      <div class="controls">
        <div class="btn-group">
            <input type="text" name="strategy" id="strategy" style="width:250px;height:30px;font-style:normal" >
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-cog icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:250px;">
                <li><a href="#" onclick="javascript:
                	$('#modalEdit #strategy').val('org.ff4j.strategy.el.ExpressionFlipStrategy');
                	$('#modalEdit #stratlist').show();
                	$('#modalEdit #initParams').val('expression=dummy OR foo')">Expression</a>
                </li>
              <li><a href="#" onclick="javascript:
              		$('#modalEdit #strategy').val('org.ff4j.strategy.PonderationStrategy');
              		$('#modalEdit #stratlist').show();
              		$('#modalEdit #initParams').val('weight=0.5')">Ponderation</a></li>
                <li><a href="#" onclick="javascript:
               		$('#modalEdit #strategy').val('org.ff4j.strategy.time.ReleaseDateFlipStrategy');
               		$('#modalEdit #stratlist').show();
               		$('#modalEdit #initParams').val('releaseDate=2013-07-14-14:00')">ReleaseDate</a></li>
              <li><a href="#" onclick="javascript:
              		$('#modalEdit #strategy').val('org.ff4j.strategy.ClientFilterStrategy');
              		$('#modalEdit #stratlist').show();
              		$('#modalEdit #initParams').val('grantedClients=c1,c2,c3')">ClientFilter</a></li>
              <li><a href="#" onclick="javascript:
              		$('#modalEdit #strategy').val('org.ff4j.strategy.ServerFilterStrategy');
              		$('#modalEdit #stratlist').show();
              		$('#modalEdit #initParams').val('grantedServers=s1,s2,s3')">ServerFilter</a></li>
              <li class="divider"></li>
              <li><a href="#" onclick="javascript:
              		$('#modalEdit #strategy').val('');
              		$('#modalEdit #stratlist').hide();
              		$('#modalEdit #startparam').val('')">None</a></li>
            </ul>
          </div>
        </div>
         <div id="stratlist" class="controls hide" style-"font-style:normal">
        <p/><br/><span style="color:#00ab8b"><i class="icon-star"></i>&nbsp;Please Give init param :
          <br><input type="text" name="initParams" id="initParams" style="width:250px;height:30px;font-style:normal">
      </div>
      </div>

    <!-- Permissions --> 
    <div class="control-group">  
      <label class="control-label" for="permission" style="color:#00ab8b;font-style:normal">Permissions</label>  
      <div class="controls">
        <div class="btn-group">
            <input type="text" name="permission" id="permission" style="width:250px;height:30px;font-style:normal" value="Public" readonly="readonly">
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-user icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:250px;font-style:normal">
                <li><a href="#" onclick="javascript:$('#modalEdit #permission').val('Public');$('#modalEdit #permlist').hide();"><i class="icon-flag" ></i>&nbsp;Public</a></li>
                <li><a href="#" onclick="javascript:$('#modalEdit #permission').val('Restricted');$('#modalEdit #permlist').show();"><i class="icon-lock" ></i>&nbsp;Restricted</a></li>
            </ul>
        </div>
      </div>
      <div id="permlist" class="controls hide" style="font-style:normal">
        <p/><br/><span style="color:#00ab8b"><i class="icon-list"></i>&nbsp;Please select your permissions :</span>
        {PERMISSIONS}
      </div>
     </div><!-- Control group -->
    </div> <!-- Modal-body -->
    
    <div class="modal-footer">
      <button class="btn btn" data-dismiss="modal"><i class="icon-remove" ></i>&nbsp;Cancel</button>
      <button class="btn btn-green" type="submit"><i class="icon-refresh icon-white" ></i>&nbsp;Update </button>
    </div>

     <script type="text/javascript" >
     
      $(document).on("click", ".open-EditFlipDialog", function () {
        $("#modalEdit #uid").val($(this).data('id'));
        $("#modalEdit #desc").val($(this).data('desc'));
        $("#modalEdit #groupName").val($(this).data('group'));
        
        /* --------- */
        /* Strategy  */
        /* --------- */
        var strategy = $(this).data('strategy');
        $("#modalEdit #strategy").val(strategy);
        if (strategy == '') {
          $("#modalEdit #stratlist").hide();
          $("#modalEdit #initParams").val('');
        } else {
          $("#modalEdit #stratlist").show();
          var initParams = $(this).data('stratparams').replace("{", "").replace("}", "");
          $("#modalEdit #initParams").val(initParams);
        }
        
        /* ------------ */
        /* Permissions. */
        /* ------------ */
        var permissions = $(this).data('permissions').replace("[", "").replace("]", "");
        if (permissions == '') {
          $("#modalEdit #permlist").hide();
          $("#modalEdit #permission").val('Public');
        } else {
          $("#modalEdit #permission").val('Restricted');
          $("#modalEdit #permlist").show();
       	  // Split permissions
       	  var arrayOfPermissions = permissions.split(',');
          for(perm in arrayOfPermissions) {
        	$("#modalEdit #perm-check-" + arrayOfPermissions[perm].trim()).attr('checked', true);
          }
        }
        
        });
      </script>
      
    <input type="hidden" name="op" value="update"  />
  </div>
</form>



<!-- *********************************************************** -->
<!-- **                 Creation PROPERTY                     ** -->
<!-- *********************************************************** -->


<form class="form-horizontal" action="{SERVLET_CONTEXT}" method="POST" >

  <input type="hidden" name="op" value="createProperty"  />
  <input type="hidden" name="featureid"  value=""  />
    
 <div class="modal hide fade" id="modalCreateProperty" tabindex="-1" role="dialog" aria-labelledby="labelCreateProperty" aria-hidden="true">
  
  <!-- Header -->
  <div class="modal-header">   
    <button class="close" data-dismiss="modal"><span  style="color:#ffffff">x</span></button>   
    <h4 id="labelCreate"><i class="icon-plus icon-white" ></i>&nbsp;Create new Property</h4>
  </div>

  <!-- Body -->
  <div class="modal-body" style="height:500px">
  
   <!-- Name --> 
   <div class="control-group"> 
      <label class="control-label" for="name" style="color:#19599A;font-style:normal;font-weight:normal">Property Name</label>
      <div class="controls">   
        <input type="text" name="name" id="name" style="width:250px;height:30px;" required/>  
      </div> 
    </div>
    
    <!-- Description --> 
    <div class="control-group">  
      <label class="control-label" for="desc" style="color:#19599A;font-style:normal">Description</label>  
      <div class="controls">
        <textarea class="field span4" name="desc" id="desc" rows="3"></textarea>
      </div>
    </div>
    
  <!-- Type --> 
    <div class="control-group">  
      <label class="control-label" for="pType" style="color:#19599A;font-style:normal">Type</label>
       <div class="controls"  id="div-type-property">
	      <div class="btn-group">
	            <input type="text" name="pType" id="pType" style="width:250px;height:30px;font-style:normal" >
	            <button type="button" class="btn btn-blue dropdown-toggle" data-toggle="dropdown">
	              <span class="caret"></span>
	              <span class="sr-only"><i class="icon-cog icon-white" ></i></span>
	            </button>
	            <ul class="dropdown-menu" role="menu" style="width:250px;">
	            	<li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyString');javascript:$('#modalCreateProperty #pValue').val('abc');">String</a></li>
	                <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyBoolean');javascript:$('#modalCreateProperty #pValue').val('true');">boolean</a></li>
	                <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyInt');javascript:$('#modalCreateProperty #pValue').val('0')">int</a></li>
	                <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyDouble');javascript:$('#modalCreateProperty #pValue').val('0.0')">double</a></li>
	                <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyDate');javascript:$('#modalCreateProperty #pValue').val('2015-07-31 23:59')">date</a></li>
	                <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyCalendar');javascript:$('#modalCreateProperty #pValue').val('2015-07-31 23:59')">calendar</a></li>
	                <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyLogLevel');javascript:$('#modalCreateProperty #pValue').val('DEBUG')">loglevel</a></li>
	                <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyBigInteger');javascript:$('#modalCreateProperty #pValue').val('10000000');">BigInteger</a></li>
	                <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyBigDecimal');javascript:$('#modalCreateProperty #pValue').val('10000000');">BigDecimal</a></li>
	                <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('foo.bar.YourClassProperty');">other</a></li>
	            </ul>
	        </div>
	   </div>
    </div>
    
    <!-- Value --> 
    <div class="control-group" >  
      <label class="control-label" for="pValue" style="color:#19599A;font-style:normal">Value</label>  
      <div class="controls" >
      	<input type="text" name="pValue" id="pValue" style="width:250px;height:30px;" required />
      </div>
    </div>
    
     <!-- Value --> 
    <div class="control-group">  
      <label class="control-label" for="pValue" style="color:#19599A;font-style:normal">FixedValue</label>  
      <div class="controls">
      		<p style="color:#19599A;font-style:normal"> <i>Please add fixedValues once the property is created</i>
      </div>
    </div>
    
  </div> <!-- modeal body -->

  <div class="modal-footer" >
    <button class="btn btn" data-dismiss="modal"><i class="icon-remove" ></i>&nbsp;Cancel</button>
    <button class="btn btn-primary" type="submit"><i class="icon-ok icon-white" ></i>&nbsp;Create</button>
  </div>

   <script type="text/javascript" >
    $(document).on("click", ".open-AddFlipDialog", function () { $(".modal-body #uid").focus();});
   </script>

 
 </div>
</form>

<!-- ************************************************************** -->
<!-- **                 EDIT PROPERTY FORM                        ** -->
<!-- ************************************************************** -->

<form class="form-horizontal" action="{SERVLET_CONTEXT}" method="POST" >
  <input type="hidden" name="op"  		 value="updateProperty"  />
  <input type="hidden" name="featureid"  value=""  />
  
  <div class="modal hide fade" id="modalEditProperty" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  	 
    <div class="modal-header" style="background-color:#19599A">
      <button class="close" data-dismiss="modal">x</button>
      <h4 id="myModalLabel"><i class="icon-pencil"></i>&nbsp;Edit Property</h4>
    </div>
    
  <!-- Body -->
  <div class="modal-body" style="height:500px">
    
    <input type="hidden" id="uid" name="uid" value=""      />
    
    <!-- Name --> 
    <div class="control-group"> 
      <label class="control-label" for="name" style="color:#19599A;font-style:normal;font-weight:normal">Property Name</label>
      <div class="controls">   
        <input type="text" name="name" id="name" style="width:250px;height:30px;" required/>  
      </div> 
    </div>
    
    <!-- Description --> 
    <div class="control-group">  
      <label class="control-label" for="desc" style="color:#19599A;font-style:normal">Description</label>  
      <div class="controls">
        <textarea class="field span4" name="desc" id="desc" rows="3"></textarea>
      </div>
    </div>
    
     <!-- Type --> 
    <div class="control-group">  
      <label class="control-label" for="pType" style="color:#19599A;font-style:normal">Type</label>
       <div class="controls"  id="div-type-property">
	      <div class="btn-group">
	            <input type="text" name="pType" id="pType" style="width:250px;height:30px;font-style:normal" readonly="true">
	        </div>
	   </div>
    </div>

    <!-- Value --> 
    <div class="control-group" >  
      <label class="control-label" for="pValue" style="color:#19599A;font-style:normal">Value</label>  
      <div class="controls" id="div-value-property" ></div>
    </div>
       
    <!-- Value --> 
    <div class="control-group">  
      <label class="control-label" for="pValue" style="color:#19599A;font-style:normal">FixedValue</label>  
      <div class="controls">
      <table class="table table-striped table-bordered">
	     <thead>
	      <tr style="">
	       <th style="width:20%;text-align:center;background-color:#888888;color:white">Value</th>
	       <th style="width:20%;text-align:center;background-color:#888888;color:white">Edit</th>
	      </tr>
	    </thead>
	    <tbody id="modalEditPropertyFixedValues">
	    </tbody>
	    </table>
      </div>
    </div>
    
   </div>

   <div class="modal-footer">
      <button class="btn btn" data-dismiss="modal"><i class="icon-remove" ></i>&nbsp;Cancel</button>
      <button class="btn btn-primary" type="submit"><i class="icon-refresh icon-white" ></i>&nbsp;Update Property</button>
    </div>

   </div>
  
</form>

<script type="text/javascript">

 function toggle(flip) {        
    if(!$(flip).is(':checked')) {
    	$.ajax({
    	    type: 'GET',
    	    url: $(location).attr('href') + '?op=disable&uid=' + $(flip).attr('id'),
    	    success: function(data){
    	    	 $('#message').html(data);     
    	    },
    	    statusCode: {
    	    401: function() {
    	    	$('#message').html('<div class="alert alert-error" >' +
    	   				'<button type="button" class="close" data-dismiss="alert">&times;</button>' +
    	   				'<span style="font-style:normal;color:#880000;">' +
    	   				'UnAuthorized : You must be logged</span></div>');
    	   		$(flip).prop('checked', true);
    	    },
    	    403: function() {
    	   		$('#message').html('<div class="alert alert-error" >' +
    	   				'<button type="button" class="close" data-dismiss="alert">&times;</button>' +
    	   				'<span style="font-style:normal;color:#880000;">' +
    	   				'Forbidden : Insuffisant permissions</span></div>');
    	   		$(flip).prop('checked', true);
    	   }
    	  }
    	});
      
    } else {
    	
    	$.ajax({
    	    type: 'GET',
    	    url: $(location).attr('href') + '?op=enable&uid=' + $(flip).attr('id'),
    	    success: function(data){
    	    	 $('#message').html(data);     
    	    },
    	    statusCode: {
    	    401: function() {
    	    	$('#message').html('<div class="alert alert-error" >' +
    	   				'<button type="button" class="close" data-dismiss="alert">&times;</button>' +
    	   				'<span style="font-style:normal;color:#880000;">' +
    	   				'UnAuthorized : You must be logged</span></div>');
    	   		$(flip).prop('checked', false);
    	    },
    	    403: function() {
    	   		$('#message').html('<div class="alert alert-error" >' +
    	   				'<button type="button" class="close" data-dismiss="alert">&times;</button>' +
    	   				'<span style="font-style:normal;color:#880000;">' +
    	   				'Forbidden : Insuffisant permissions</span></div>');
    	   		$(flip).prop('checked', false);
    	   }
    	  }
    	});
    }
    
  }
 
 function ff4j_redrawDivProperty(pname) {
 	console.log('redrawDivProperty:' + pname);
 	$.get(ff4j_getPathFromUrl($(location).attr('href')) + '?op=readProperty&uid=' + pname, function(myProperty) { 
 	
 		// Read Json Expression for property
 		$("#modalEditProperty #uid").val(myProperty.name);
     	$("#modalEditProperty #name").val(myProperty.name);
     	$("#modalEditProperty #desc").val(myProperty.description);
     	$("#modalEditProperty #pType").val(myProperty.type);
     	$("#modalEditPropertyFixedValues").html('');
     			
     	if (myProperty.fixedValues) {
     		var htmlForValues = '<div class="btn-group">';
     		htmlForValues+= '<input type="text" name="pValue" id="pValue" style="width:250px;height:30px;font-style:normal" value="' + myProperty.value + '" readonly="readonly">';
     		htmlForValues+= '<button type="button" class="btn btn-blue dropdown-toggle" data-toggle="dropdown">'
     		htmlForValues+= '<span class="caret"></span>';
     		htmlForValues+= '<span class="sr-only"><i class="icon-cog icon-white" ></i></span>';
     		htmlForValues+= '</button>';
     		htmlForValues+= '<ul class="dropdown-menu" role="menu" style="width:250px;">';
     				    
     		var htmlForFixedValueList = '';
     		for (fixed in myProperty.fixedValues) {
     			htmlForFixedValueList+= '<tr><td>' + myProperty.fixedValues[fixed] + '</td><td>';
     			htmlForFixedValueList+= '<a href="#" onclick="javascript:ff4j_deleteFixedValue(\'' + myProperty.name + '\',\'' +  myProperty.fixedValues[fixed] + '\')" style="width:6px;" class="btn">';
     			htmlForFixedValueList+= '<i class="icon-trash" style="margin-left:-5px;"></i></a></td></tr>';
     			htmlForValues+= '<li><a href="#" onclick="javascript:$(\'#modalEditProperty #pValue\').val(\'' + myProperty.fixedValues[fixed] + '\');">' + myProperty.fixedValues[fixed] + '</a></li>';
     		}
     		htmlForValues+= '</ul></div> </div>';
     		$("#div-value-property").html(htmlForValues);
     			 	
     	} else {
     		// no myProperty.fixedValues
     		var htmlForValue = '<input type="text" name="pValue" id="pValue" style="width:250px;height:30px;" value="';
     		htmlForValue+= myProperty.value;
     		htmlForValue+= '" required/>';
     		$("#div-value-property").html(htmlForValue);
     	}
     	
     	htmlForFixedValueList+= '<tr><td><input type="text" id="nnfix" name="nnfix"  style="width:250px;height:30px;"/></td>';
 		htmlForFixedValueList+= '    <td><a href="#" onclick="javascript:ff4j_createFixedValue(\'' + myProperty.name + '\', $(\'#modalEditProperty #nnfix\').val())"';
 		htmlForFixedValueList+= ' style="width:6px;" class="btn"><i class="icon-plus" style="margin-left:-5px;"></i></a></td></tr>';
 		$("#modalEditPropertyFixedValues").html(htmlForFixedValueList);
 		
 	}); // end of function $get
 }

 function ff4j_deleteFixedValue(pName, fValue) {
	var deleteURL = ff4j_getPathFromUrl($(location).attr('href')) + '?op=deleteFixedValue&uid=' + pName + '&fixedValue=' + fValue;
 	$.get(deleteURL, function() { ff4j_redrawDivProperty(pName) });
 }
 
 function ff4j_createFixedValue(pName, fValue) {
	var createURL = ff4j_getPathFromUrl($(location).attr('href')) + '?op=addFixedValue&uid=' + pName + '&fixedValue=' + fValue;
	$.get(createURL, function() { ff4j_redrawDivProperty(pName) });
 }
 
 function ff4j_changePropertyType(pName, pType) {
	 $('#modalEditProperty #pType').val(pType);
	 ff4j_redrawDivProperty(pName);
 }

 // Keyboard shortcuts
 $(window).keydown(function(e) {
	// Enable keypress detection only if not in input element
	if ($(e.target).closest("input")[0]) {
       return;
    }
	if ($(e.target).closest("textarea")[0]) {
	       return;
	}
	switch (e.keyCode) {
		case 69: // e
			window.location= ff4j_getPathFromUrl($(location).attr('href')) + '?op=export';
		return;
		case 70: // f
			$('#modalCreate').modal('show');	
		return;
		case 73: // i
			$('#modalImport').modal('show');			
		return;
		case 80: // p
			alert('create new Feature');    
		return;
		case 84: // t
			$('#modalToggle').modal('show');    
		return;
	}
});
 
 $(document).on("click", ".open-EditPropertyDialog", function() { ff4j_redrawDivProperty($(this).data('pname')) });
 

</script>

</body>
</html>